<!-- 列表展示组件 -->
<template>
	<view class="list-item" :class="{ act: isAct }" @click="itemClick">
		<view v-if="iconType == 'font'" class="font-icon">
			<uni-badge class="badge" type="error" :text="badgeNum"></uni-badge>
			<view class="icon iconfont nol" :class="iconNol" :style="{ 'font-size': iconSize + 'rpx' }"></view>
			<view class="icon iconfont hor" :class="iconHor" :style="{ 'font-size': iconSize + 'rpx' }"></view>
		</view>

		<view v-if="iconType == 'img'" class="img-icon">
			<uni-badge class="badge" type="error" :text="badgeNum"></uni-badge>
			<image class="icon nol" :src="iconNol" :style="{ width: iconSize + 'rpx', height: iconSize + 'rpx' }"></image>
			<image class="icon hor" :src="iconHor" :style="{ width: iconSize + 'rpx', height: iconSize + 'rpx' }"></image>
		</view>
		<text class="text" :style="{ 'font-size': nameSize + 'rpx', color: nameColor }">{{ name }}</text>
		<uni-icons class="arrow" v-if="arrowShow" type="arrowright" size="30"></uni-icons>
	</view>
</template>

<script>
import uniBadge from '../uni-badge/uni-badge.vue';
export default {
	components: {
		uniBadge
	},
	props: {
		type: {
			type: String, //交互类型 'none' 'route' 等类型
			default: 'none'
		},
		routeLink: {
			type: String, // 路由地址
			default: ''
		},
		iconType: {
			// icon图标类型
			type: String, // img:图片类型 font:字体图标类型 none:没有图标
			default: 'img'
		},
		iconNol: {
			//常态图标地址 或 文字图标类名
			type: String,
			default: '../../static/load_error.jpeg'
		},
		iconHor: {
			//高亮图标 或 文字图标类名
			type: String,
			default: '../../static/load_error.jpeg'
		},
		iconSize: {
			type: Number,
			default: 36
		},
		isAct: {
			//是否是当前高亮
			type: Boolean,
			default: false
		},
		name: {
			type: String,
			default: '未定义'
		},
		nameSize: {
			//名字大小
			type: Number,
			default: 30
		},
		nameColor: {
			//名字颜色
			type: String,
			default: '#333333'
		},
		arrowShow: {
			//是否显示箭头
			type: Boolean,
			default: true
		},
		badgeNum: {
			// 标记数字
			type: Number,
			default: 0
		}
	},

	data() {
		return {};
	},
	methods: {
		itemClick() {
			// 表单元素被点击
			if (this.$props.type === 'route' && this.$props.routeLink) {
				// 路由跳转
				console.log('跳转地址', this.$props.routeLink);
			} else {
			}
		}
	},
	mounted() {
		console.log('iconType', this.$props.iconType);
	}
};
</script>

<style lang="scss" scoped>
.list-item {
	// width: 100%;
	// flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 15rpx 15rpx;
	.arrow {
		display: flex;
	}
	.font-icon,
	.img-icon {
		width: 36rpx;
		// height: 36rpx;
		// background-color: #ddd;
		border-radius: 50%;
		line-height: 36rpx;
		position: relative;

		.badge {
			position: absolute;
			right: 0;
			top: 0;
		}

		.icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			color: #ffffff;
			font-size: 25rpx;
		}

		.nol {
			display: flex;
		}

		.hor {
			display: none;
		}
	}

	.text {
		// width: 90%;
		width: 100%;
		color: #333333;
		box-sizing: border-box;
		padding-left: 20rpx;
		font-size: 35rpx;
		line-height: 1;
	}
}

// .list-item:hover,
.list-item.act {
	.font-icon,
	.img-icon {
		.nol {
			display: none;
		}

		.hor {
			display: flex;
		}
	}

	.text {
	}
}
</style>
